<![CDATA[Topics tagged with html attribute reference]]>https://community.secnto.com//tags/html attribute referenceRSS for NodeMon, 08 Jun 2026 20:45:30 GMTInvalid Date60<![CDATA[HTML Attribute Reference]]>HTML Attribute Reference

The table below provides an overview of HTML attributes, including which elements they apply to and their descriptions:

Attribute Belongs to Description
accept <input> Specifies the types of files that the server accepts (for type="file").
accept-charset <form> Specifies the character encodings to be used for form submission.
accesskey Global Attributes Specifies a shortcut key to activate or focus an element.
action <form> Specifies where to send form data when the form is submitted.
align Not supported in HTML 5. Specifies alignment according to surrounding elements. Use CSS instead.
alt <area>, <img>, <input> Provides alternate text when the original element fails to display.
async <script> Specifies that the script should be executed asynchronously (for external scripts).
autocomplete <form>, <input> Specifies whether autocomplete is enabled for the element.
autofocus <button>, <input>, <select>, <textarea> Indicates that the element should automatically get focus when the page loads.
autoplay <audio>, <video> Specifies that the audio/video should start playing as soon as it’s ready.
bgcolor Not supported in HTML 5. Specifies the background color of an element. Use CSS instead.
border Not supported in HTML 5. Specifies the width of the border of an element. Use CSS instead.
charset <meta>, <script> Defines the character encoding.
checked <input> Indicates that an <input> element should be pre-selected (for type="checkbox" or type="radio").
cite <blockquote>, <del>, <ins>, <q> Provides a URL that explains the quote/deleted/inserted text.
class Global Attributes Assigns one or more class names to an element (refers to a class in a style sheet).
color Not supported in HTML 5. Specifies the text color of an element. Use CSS instead.
cols <textarea> Defines the visible width of a text area.
colspan <td>, <th> Specifies how many columns a table cell should span.
content <meta> Provides the value associated with the http-equiv or name attribute.
contenteditable Global Attributes Indicates whether the content of an element is editable.
controls <audio>, <video> Specifies that audio/video controls should be displayed.
coords <area> Defines the coordinates of an area in an image map.
data <object> Specifies the URL of the resource for the object.
data-* Global Attributes Used to store custom data private to the page or application.
datetime <del>, <ins>, <time> Specifies the date and time.
default <track> Indicates that the track should be enabled if no other track is more appropriate.
defer <script> Specifies that the script should be executed when the page has finished parsing (for external scripts).
dir Global Attributes Sets the text direction for the content in an element.
dirname <input>, <textarea> Indicates that the text direction will be submitted.
disabled <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> Disables the specified element or group of elements.
download <a>, <area> Indicates that the target will be downloaded when a user clicks the hyperlink.
draggable Global Attributes Determines whether an element is draggable or not.
enctype <form> Specifies how form-data should be encoded when submitting it to the server (for method="post").
enterkeyhint Global Attributes Provides a hint about the text of the enter-key on a virtual keyboard.
for <label>, <output> Specifies which form element(s) a label/calculation is bound to.
form <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea> Specifies the name of the form the element belongs to.
formaction <button>, <input> Defines where to send form-data when the form is submitted (for type="submit").
headers <td>, <th> Lists one or more header cells related to a cell.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Sets the height of the element.
hidden Global Attributes Indicates that an element is not relevant.
high <meter> Defines the range that is considered to be a high value.
href <a>, <area>, <base>, <link> Provides the URL of the page the link goes to.
hreflang <a>, <area>, <link> Specifies the language of the linked document.
http-equiv <meta> Provides an HTTP header for the information/value of the content attribute.
id Global Attributes Assigns a unique id to an element.
inert Global Attributes Indicates that the browser should ignore this section.
inputmode Global Attributes Defines the mode of a virtual keyboard.
ismap <img> Specifies an image as a server-side image map.
kind <track> Specifies the kind of text track.
label <track>, <option>, <optgroup> Provides the title of the text track.
lang Global Attributes Defines the language of the element’s content.
list <input> Refers to a <datalist> element that contains pre-defined options for an <input> element.
loop <audio>, <video> Indicates that the audio/video should start over when finished.
low <meter> Defines the range considered to be a low value.
max <input>, <meter>, <progress> Specifies the maximum value.
maxlength <input>, <textarea> Sets the maximum number of characters allowed in an element.
media <a>, <area>, <link>, <source>, <style> Defines what media/device the linked document is optimized for.
method <form> Specifies the HTTP method to use when sending form-data.
min <input>, <meter> Sets the minimum value.
multiple <input>, <select> Allows multiple values to be entered.
muted <video>, <audio> Indicates that the audio output should be muted.
name <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> Specifies the name of the element.
novalidate <form> Prevents the form from being validated when submitted.
onabort <audio>, <embed>, <img>, <object>, <video> Script to be executed when an operation is aborted.
onafterprint <body> Script to be executed after the document is printed.
onbeforeprint <body> Script to be executed before the document is printed.
onbeforeunload <body> Script to be executed when the document is about to be unloaded.
onblur All visible elements Script to be executed when an element loses focus.
oncanplay <audio>, <video> Script to be executed when the browser can start playing the media.
onchange <input>, <select>, <textarea> Script to be executed when the value of an element changes.
onclick All visible elements Script to be executed when an element is clicked.
oncontextmenu All visible elements Script to be executed when the right mouse button is clicked.
oncopy All visible elements Script to be executed when the content of an element is copied.
oncut All visible elements Script to be executed when the content of an element is cut.
ondblclick All visible elements Script to be executed when an element is double-clicked.
ondrag All visible elements Script to be executed when an element is dragged.
ondragend All visible elements Script to be executed when a drag operation is completed.
ondragenter All visible elements Script to be executed when an element is dragged over a valid drop target.
ondragleave All visible elements Script to be executed when an element leaves a valid drop target.
ondragover All visible elements Script to be executed when an element is dragged over another element.
ondragstart All visible elements Script to be executed when a drag operation starts.
ondrop All visible elements Script to be executed when an element is dropped.
onended <audio>, <video> Script to be executed when the media ends.
onerror <img>, <script>, <iframe>, <object> Script to be executed when an error occurs.
onfocus All visible elements Script to be executed when an element gets focus.
onformchange <form> Script to be executed when the form’s elements change.
onforminput <form> Script to be executed when an input element within the form changes.
oninput All visible elements Script to be executed when the value of an input element changes.
oninvalid <input>, <select>, <textarea> Script to be executed when an input element fails validation.
onkeydown All visible elements Script to be executed when a key is pressed.
onkeypress All visible elements Script to be executed when a key is pressed and released.
onkeyup All visible elements Script to be executed when a key is released.
onload <body>, <iframe>, <img>, <input>, <script> Script to be executed when an element finishes loading.
onloadeddata <audio>, <video> Script to be executed when the media’s data is loaded.
onloadedmetadata <audio>, <video> Script to be executed when the media’s metadata is loaded.
onloadstart <audio>, <video> Script to be executed when the media starts loading.
onmessage <iframe>, <object>, <window> Script to be executed when a message is received from another window.
onmousedown All visible elements Script to be executed when the mouse button is pressed down.
onmousemove All visible elements Script to be executed when the mouse pointer moves.
onmouseout All visible elements Script to be executed when the mouse pointer leaves an element.
onmouseover All visible elements Script to be executed when the mouse pointer is moved onto an element.
onmouseup All visible elements Script to be executed when the mouse button is released.
onpause <audio>, <video> Script to be executed when the media is paused.
onplay <audio>, <video> Script to be executed when the media starts playing.
onplaying <audio>, <video> Script to be executed when the media starts playing after having been paused.
onprogress <audio>, <video> Script to be executed while the media is being loaded.
onratechange <audio>, <video> Script to be executed when the playback rate changes.
onreset <form> Script to be executed when a form is reset.
onscroll All visible elements Script to be executed when an element is scrolled.
onseeked <audio>, <video> Script to be executed when the user has finished seeking to a new position in the media.
onseeking <audio>, <video> Script to be executed when the user starts seeking to a new position in the media.
onselect <input>, <textarea> Script to be executed when text is selected.
onstalled <audio>, <video> Script to be executed when the media has stopped loading.
onsubmit <form> Script to be executed when a form is submitted.
onsuspend <audio>, <video> Script to be executed when the media is paused before it can be played.
ontimeupdate <audio>, <video> Script to be executed when the time of the media is updated.
onvolumechange <audio>, <video> Script to be executed when the volume changes.
onwaiting <audio>, <video> Script to be executed when the media pauses to buffer.
open <details> Specifies whether the <details> element is open or closed.
optimum <meter> Defines the range that is considered optimal.
pattern <input> Specifies a regular expression that the input element’s value must match.
placeholder <input>, <textarea> Provides a hint to the user about what to enter in an input field.
poster <video> Specifies an image to show as a placeholder before the video starts playing.
preload <audio>, <video> Specifies if and how the media should be loaded when the page loads.
readonly <input>, <textarea> Specifies that an input field is read-only.
rel <a>, <area>, <link> Specifies the relationship between the current document and the linked document.
required <input>, <select>, <textarea> Indicates that the user must fill out this field before submitting the form.
reversed <ol> Specifies that the list order should be reversed.
rows <textarea> Defines the number of visible rows in a text area.
rowspan <td>, <th> Specifies how many rows a table cell should span.
sandbox <iframe> Enables an extra set of restrictions for the content in an <iframe>.
scope <td>, <th> Specifies whether a header cell is a header for a row, column, or group of rows or columns.
selected <option> Specifies that an option should be pre-selected.
shape <area> Defines the shape of a clickable area in an image map.
size <input>, <select> Specifies the width of the element.
sizes <link> Specifies the size of the linked resource.
span <col> Defines the number of columns a column group should span.
spellcheck Global Attributes Specifies whether the element should be checked for spelling and grammar.
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <video> Specifies the URL of the media resource.
srcdoc <iframe> Specifies the HTML content to be displayed in an <iframe>.
srclang <track> Specifies the language of the track text data.
srcset <img>, <source> Defines a set of images to be used by the browser based on the screen size and resolution.
step <input> Specifies the legal number intervals for an input field.
summary <table> Provides a summary of the content of the table.
tabindex All visible elements Specifies the tab order of an element.
target <a>, <form>, <base> Specifies where to open the linked document or where to submit the form.
title All visible elements Provides additional information about an element (often shown as a tooltip).
type All visible elements Specifies the type of element or attribute, such as the type of an input or the type of a script.
usemap <img>, <object>, <input> Specifies an image map to be used with the <img>, <object>, or <input> element.
value <input>, <button>, <option>, <li> Specifies the value of an element.
width <img>, <input>, <iframe>, <video>, <canvas>, <embed> Specifies the width of an element.
wrap <textarea> Specifies how the text in a text area should be wrapped.

Feel free to ask if you need more details on any of these attributes!

]]>https://community.secnto.com//topic/2616/html-attribute-referencehttps://community.secnto.com//topic/2616/html-attribute-referenceInvalid Date<![CDATA[HTML Attributes: A Comprehensive Guide]]>In HTML, attributes provide additional information about HTML elements. They are always included in the opening tag and typically come in name/value pairs like this: name="value". Attributes modify the default behavior of elements, allowing you to customize their appearance, functionality, and content.

In this guide, we’ll explore some of the most commonly used HTML attributes and best practices for using them.

1. The href Attribute

The href attribute is used with the <a> (anchor) tag to define the URL or location of the linked document.

Example of the href Attribute:

<a href="https://www.example.com">Visit Example.com</a>

In this example, clicking the text “Visit Example.com” will take you to the specified URL.

2. The src Attribute

The src attribute is used with the <img>, <script>, and <iframe> tags to specify the source (file path or URL) of an image, script, or media content.

Example of the src Attribute:

<img src="image.jpg" alt="An example image">

In this example:

  • src="image.jpg": Specifies the location of the image file.
  • alt="An example image": Provides alternative text (discussed further below).

3. The width and height Attributes

The width and height attributes define the dimensions of an image or other HTML elements. They can be defined either in pixels or as a percentage.

Example of the width and height Attributes:

<img src="image.jpg" alt="An example image" width="300" height="200">

In this example:

  • width="300": The image will be 300 pixels wide.
  • height="200": The image will be 200 pixels tall.

Using these attributes ensures that the image or media element maintains its intended size, regardless of its original dimensions.

4. The alt Attribute

The alt attribute is used with the <img> tag to provide alternative text. This text is displayed if the image fails to load and is read by screen readers to make websites accessible to visually impaired users.

Example of the alt Attribute:

<img src="logo.png" alt="Company Logo">

In this example:

  • alt="Company Logo": Describes the image as “Company Logo” in case it does not display or for accessibility purposes.

5. The style Attribute

The style attribute allows you to apply CSS styles directly to an HTML element. While using external CSS is generally preferred for maintainability, the style attribute can be handy for quick, inline styling.

Example of the style Attribute:

<p style="color: blue; font-size: 18px;">This is a styled paragraph.</p>

In this example:

  • The paragraph text is blue.
  • The font size of the text is set to 18 pixels.

6. The lang Attribute

The lang attribute specifies the language of the element’s content. This attribute is important for accessibility tools like screen readers, as well as for search engines.

Example of the lang Attribute:

<html lang="en">

In this example:

  • lang="en": Declares that the content of the page is in English.

7. The title Attribute

The title attribute provides extra information about an element. When a user hovers over the element, the text in the title attribute will appear as a tooltip.

Example of the title Attribute:

<a href="https://www.example.com" title="Go to Example.com">Visit Example</a>

In this example:

  • When the user hovers over the link, a tooltip displaying “Go to Example.com” will appear.

8. We Suggest: Always Use Lowercase Attributes

While HTML is not case-sensitive, it is best practice to always write attributes in lowercase to maintain consistency and readability. This approach is particularly important when working with XHTML, which is case-sensitive.

Good Practice:

<img src="image.jpg" alt="Image description">

Bad Practice:

<img SRC="image.jpg" ALT="Image description">

9. We Suggest: Always Quote Attribute Values

It’s best to always quote attribute values (using either single or double quotes). Although some browsers may tolerate unquoted values, this can lead to problems with certain values, such as those containing spaces.

Good Practice:

<a href="https://www.example.com">Visit Example</a>

Bad Practice:

<a href=https://www.example.com>Visit Example</a>

Unquoted attribute values can cause issues if the value contains special characters or spaces.

10. Single or Double Quotes?

In HTML, it doesn’t matter whether you use single quotes (') or double quotes (") for attribute values. Both work fine. However, consistency is important, so pick one style and stick to it throughout your code.

Example of Single Quotes:

<img src='image.jpg' alt='Image description'>

Example of Double Quotes:

<img src="image.jpg" alt="Image description">

Both examples are valid, but consistency makes your code easier to read and maintain.

11. Chapter Summary

In this chapter, we covered some of the most important HTML attributes:

  • href: Defines the URL of a link.
  • src: Specifies the source of an image or media file.
  • width and height: Set the dimensions of an element.
  • alt: Provides alternative text for images, improving accessibility.
  • style: Allows inline styling of elements.
  • lang: Specifies the language of the content.
  • title: Adds extra information in the form of a tooltip when hovering over an element.

We also recommended using lowercase for attributes, quoting attribute values, and ensuring consistency with single or double quotes.

12. HTML Exercises

Here are a few exercises you can try to reinforce what you’ve learned about HTML attributes:

  1. Create a Link:
    Add a link to your favorite website, using the href attribute to specify the URL and the title attribute to add a tooltip.

  2. Add an Image:
    Insert an image using the src attribute, and include alt, width, and height attributes.

  3. Style an Element:
    Apply inline styles to a paragraph element using the style attribute. Try changing the text color, size, and font family.

  4. Language Attribute:
    Set the lang attribute to different languages for various sections of your webpage.

13. HTML Attribute Reference

For a complete list of HTML attributes, you can refer to the HTML Attribute Reference in most documentation sites. This will provide detailed explanations of each attribute, along with their usage and compatibility with different HTML elements.

By mastering these HTML attributes, you’ll be well on your way to creating more interactive, accessible, and well-structured webpages. Continue practicing to get comfortable using these attributes effectively in your own projects!

]]>https://community.secnto.com//topic/2615/html-attributes-a-comprehensive-guidehttps://community.secnto.com//topic/2615/html-attributes-a-comprehensive-guideInvalid Date